<template>
    <section>
        <div class="panel">
            <div class="panel-head">
                <strong><i class="el-icon-date"/><span class="title">产品查询</span></strong>
            </div>
            <div class="body-content">
                <el-form :inline="true" size='small'>
                    <el-form-item label="产品ID:">
                        <el-input v-model.trim="searchObj.appId" clearable placeholder="" size='small'/>
                    </el-form-item>
                    <el-form-item label="产品名称">
                        <el-input v-model.trim="searchObj.appName" clearable placeholder="" size='small'/>
                    </el-form-item>
                    <el-form-item label="vip专属">
                        <el-select v-model="searchObj.vip" size='small' @change="selectChange" placeholder="" style="width: 140px">
                            <el-option label="全部" value=""/>
                            <el-option label="否" value="0"/>
                            <el-option label="是" value="1"/>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit" size='small' icon="el-icon-search">查询</el-button>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="addeditDailog('add')" size='small'>新增</el-button>
                    </el-form-item>
                </el-form>
                <!--表格数据-->
                <el-table :data="tableData" v-loading="listLoading" element-loading-text="拼命加载中" border>
                    <el-table-column type='index' width='70' label="编号"/>
                    <el-table-column label="Icon" width="150">
                        <template slot-scope="scope">
                            <img :src="scope.row.appLogo" alt="logo" style="width: 50px;height: 50px;margin: 0 auto;"/>
                        </template>
                    </el-table-column>
                    <el-table-column prop="appId" label="产品ID"/>                    
                    <el-table-column prop="appName" label="产品名称"/>
                    <el-table-column prop="appDesInfo" label="产品描述"/>
                    <el-table-column label="vip专属">
                        <template slot-scope="scope">
                            {{scope.row.vip == 0 ? "否" : "是"}}
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="vip专属">
                        <template slot-scope="scope">
                            <el-select v-model="scope.row.vip" size='small' @change="vipChange(scope.row)" style="width: 120px">
                                <el-option label="否" :value="0"/>
                                <el-option label="是" :value="1"/>
                            </el-select>
                        </template>
                    </el-table-column> -->
                    <el-table-column label="额度">
                        <template slot-scope="scope">
                            {{scope.row.quotaLowerLimit}}-{{scope.row.quotaUpperLimit}}
                        </template>
                    </el-table-column>
                    <el-table-column label="状态" width="100">
                        <template slot-scope="scope">
                            <span :class="statusMap[scope.row.status]== '下线'?'color-red':''">
                                {{statusMap[scope.row.status]}}
                            </span>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="100" class-name="second-btn">
                        <template slot-scope="scope">
                            <!-- <el-button type="warning" size="mini" @click="upDownline(scope.row)">{{scope.row.status == 1 ? '下线': '上线'}}</el-button> -->
                            <el-button type="primary" size="mini" @click="addeditDailog('edit',scope.row)">编辑</el-button>
                            <el-button type="danger" size="mini" @click="deleteData(scope.$index,scope.row.autoId)">删除</el-button>
                        </template>
                    </el-table-column>
                    <!-- <el-table-column label="操作" width="120">
                        <template slot-scope="scope">
                            <router-link target="_blank" :to="{ path: 'userDetails', query: { userId: scope.row.userId, id51: scope.row.id51 }}">查看详情</router-link>
                        </template>
                    </el-table-column> -->
                </el-table>
                <!-- 分页 -->
                <div class="paginationMargin">
                    <el-pagination layout="prev, pager, next" background :current-page='currentPage' :page-count='pageCount' @current-change="handleCurrentChange"/>
                </div>
                <!-- 弹窗 -->
                <el-dialog :title="dialogTitle" :close-on-click-modal='false' :visible.sync="dialogFormVisible" width="80%" @close="closeDailog">
                    <el-form label-width="180px">
                        <!-- {{dailogFrom}} -->
                        <el-row>
                            <!--左边-->
                            <el-col :span="11">
                                <el-form-item label="产品ID:">
                                    <el-input v-model.trim="dailogFrom.appId" placeholder="" size='small' style="width:200px;"/>
                                </el-form-item>
                                <el-form-item label="产品名称:">
                                    <el-input v-model.trim="dailogFrom.appName" placeholder="" size='small' style="width:200px;"/>
                                </el-form-item>
                                <el-form-item label="产品描述:">
                                    <el-input v-model.trim="dailogFrom.appDesInfo" placeholder="" size='small' style="width:200px;"/>
                                </el-form-item>
                                <!-- <el-form-item label="产品logo:">
                                    <el-input v-model.trim="dailogFrom.appLogo" placeholder="" size='small' style="width:200px;"/>
                                </el-form-item> -->
                                <el-form-item label="产品logo:">
                                    <el-form :inline="true">
                                        <el-form-item>
                                            <el-input v-model.trim="dailogFrom.appLogo" style="width:280px;" size="small"/>
                                        </el-form-item>
                                        <el-form-item>
                                            <el-upload class="upload-demo" :headers="headers" :with-credentials="withCredentials" name="multipartFile" ref="upload" :action="uploadURL" :on-exceed="handleExceed" :on-remove="handleRemove" :on-success='handleSuccess' :file-list="fileList" :limit="1" :before-upload="beforeAvatarUpload">
                                                <el-button size="small" type="primary">点击上传</el-button>
                                            </el-upload>
                                        </el-form-item>
                                    </el-form>
                                </el-form-item>
                                <el-form-item>
                                    只能上传jpg/jpeg/png文件，且不超过300KB
                                </el-form-item>
                                <el-form-item label="状态:">
                                    <el-select v-model="dailogFrom.status" size='small' placeholder="" style="width: 200px">
                                        <el-option v-for="(value,key) in statusMap" :key="key" :label="value" :value="key" />
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="是否需要身份证:">
                                    <el-select v-model="dailogFrom.loanIsNeedIdCard" size='small' placeholder="" style="width: 200px">
                                        <el-option label="不需要" value="0"/>
                                        <el-option label="需要" value="1"/>
                                    </el-select>
                                    <!-- <el-input v-model.trim="dailogFrom.loanIsNeedIdCard" placeholder="" size='small' style="width:200px;"></el-input> -->
                                </el-form-item>
                                <el-form-item label="类别:">
                                    <el-select v-model="dailogFrom.amountType" size='small' placeholder="" style="width: 200px">
                                        <el-option label="小额" value="0"/>
                                        <el-option label="大额" value="1"/>
                                    </el-select>
                                    <!-- <el-radio v-model="dailogFrom.amountType" label='1'>大额</el-radio>
                                    <el-radio v-model="dailogFrom.amountType" label='0'>小额</el-radio> -->
                                </el-form-item>
                                <el-form-item label="产品优势:">
                                    <el-input v-model.trim="dailogFrom.labelInfo" placeholder="" size='small' style="width:200px;"/>
                                </el-form-item>
                                <el-form-item label="分类:">
                                    <el-select v-model="dailogFrom.classification" size='small' placeholder="" style="width: 200px">
                                        <!-- <el-option value="1" label="默认排序"/>
                                        <el-option value="2" label="最新上架排序"/>
                                        <el-option value="3" label="最新下款率排序"/>
                                        <el-option value="4" label="申请专区"/> -->
                                        <el-option value="0" label="综合排序"/>
                                        <el-option value="1" label="放款快"/>
                                        <el-option value="2" label="通过率高"/>
                                        <el-option value="3" label="利息低"/>
                                        <el-option value="4" label="VIP"/>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="额度:">
                                    <el-form :inline="true">
                                        <el-form-item>
                                            <el-input type='number' min="1" v-model.number="dailogFrom.quotaLowerLimit" placeholder="下限" style="width:90px;" size='small'/>
                                        </el-form-item>
                                        <el-form-item>-</el-form-item>
                                        <el-form-item>
                                            <el-input type='number' min="1" v-model.number="dailogFrom.quotaUpperLimit" placeholder="上限" style="width:90px;" size='small'/>
                                        </el-form-item>
                                    </el-form>
                                </el-form-item>
                                <el-form-item label="申请人数:">
                                    <el-input v-model.trim="dailogFrom.applyUser" placeholder="" size='small' style="width:200px;"/>
                                </el-form-item>
                                <el-form-item label="审核通过率:">
                                    <el-input v-model.trim="dailogFrom.applyPassRate" placeholder="" size='small' style="width:200px;"/>
                                </el-form-item>
                            </el-col>
                            <!--右边-->
                            <el-col :span="11">
                                <el-form-item label="是否vip专属">
                                    <el-select v-model="dailogFrom.vip" size='small' placeholder="" style="width: 200px">
                                        <el-option label="否" value="0"/>
                                        <el-option label="是" value="1"/>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="返佣描述:">
                                    <el-input v-model.trim="dailogFrom.bonusInfo" placeholder="" size='small' style="width:200px;"/>
                                </el-form-item>
                                <el-form-item label="认证描述:">
                                    <el-input v-model.trim="dailogFrom.authenticateInfo" placeholder="" size='small' style="width:200px;"/>
                                </el-form-item>
                                <el-form-item label="月费率">
                                    <el-input v-model.trim="dailogFrom.rate" placeholder="" size='small' style="width:200px;"/>
                                </el-form-item>
                                <el-form-item label="审核说明:">
                                    <el-input v-model.trim="dailogFrom.checkInfo" placeholder="" size='small' style="width:200px;"/>
                                </el-form-item>
                                <el-form-item label="申请条件:">
                                    <el-input type="textarea" :rows="2" v-model.trim="dailogFrom.applyConditions" placeholder="" size='small' style="width: 200px"/>
                                </el-form-item>
                                <el-form-item label="详情介绍:">
                                    <el-input type="textarea" :rows="2" v-model.trim="dailogFrom.intruduction" placeholder="" size='small' style="width: 200px"/>
                                    <!-- <el-input v-model.trim="dailogFrom.intruduction" placeholder="" size='small' style="width:200px;"/> -->
                                </el-form-item>
                                <el-form-item label="激活奖励:">
                                    <el-input v-model.trim="dailogFrom.bonusRateActivation" placeholder="" size='small' style="width:200px;"/>
                                </el-form-item>
                                <el-form-item label="邀请奖励:">
                                    <el-input v-model.trim="dailogFrom.bonusRateInvite" placeholder="" size='small' style="width:200px;"/>
                                </el-form-item>
                                <el-form-item label="结算说明:">
                                    <el-input v-model.trim="dailogFrom.settleInfo" placeholder="" size='small' style="width:200px;"/>
                                </el-form-item>
                                <el-form-item label="app跳转链接:">
                                    <el-input v-model.trim="dailogFrom.appLinkUrl" placeholder="" size='small' style="width:200px;"/>
                                </el-form-item>
                                <!-- <el-form-item label="审核说明">
                                    <el-input v-model.trim="dailogFrom.checkInfo" placeholder="" size='small' style="width:200px;"/>
                                </el-form-item> -->
                                <el-form-item label="海报url:">
                                    <el-input v-model.trim="dailogFrom.posterUrl" placeholder="" size='small' style="width:200px;"/>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button size="small" @click="dialogFormVisible = false">取 消</el-button>
                        <el-button size="small" type="primary" @click="confirm">确 定</el-button>
                    </div>
                </el-dialog>
            </div>
        </div>
    </section>
</template>
<script>
import * as api from "../../api/api";
export default {
    data() {
        return {
            listLoading: false, //加载中
            searchObj: {
                vip:''
            }, //查询参数
            tableData: [], //查询列表
            currentPage: 1, // 当前页数
            pageCount: 1, // 总页数

            dialogTitle: "", // 弹窗标题
            dialogType: "", // 弹窗类型
            dialogFormVisible: false,
            formLabelWidth: "120px",
            dailogFrom: {
                status: "",
                loanIsNeedIdCard: "",
                amountType: "",
                classification: "",
                vip:"",
                appLogo:"",
            },
            uploadURL: `${api.uploadFileURL}/uploadFileToFileServer`,
            // uploadURL: `${api.baseURL}/uploadFileToFileServer`,
            headers: {
                token: window.sessionStorage.token
            },
            withCredentials: true, // 支持发送 cookie 凭证信息
            fileList: [],

            statusMap: {
                "1": "上线",
                "0": "下线"
            }
        };
    },
    watch: {
        dialogType() {
            this.dialogType === "add"
                ? (this.dialogTitle = "新增产品")
                : (this.dialogTitle = "编辑产品");
        }
    },
    methods: {
        // 点击查询
        onSubmit() {
            // 查询数据列表
            this.getDataList();
        },
        // 分页点击方法
        handleCurrentChange(val) {
            this.currentPage = val;
            // 查询数据列表
            this.getDataList();
        },
        // 下拉框change
        selectChange(){
            // 查询数据列表
            this.getDataList();
        },
        // 查询数据列表
        getDataList() {
            this.listLoading = true;
            api.getProductInfoList({
                ...this.searchObj,
                pageNum: this.currentPage
            })
                .then(res => {
                    this.listLoading = false;
                    this.tableData = res.data.list;
                    this.pageCount = res.data.pages;
                })
                .catch(() => {
                    this.listLoading = false;
                });
        },
        // 选择是否vip
        vipChange(row){
            // const statusStr = row.vip === 1 ? '是' : '否';
            // this.$confirm(`确定将vip状态置为${statusStr}吗?`, '提示', {
            //     confirmButtonText: '确定',
            //     cancelButtonText: '取消',
            //     type: 'warning'
            // }).then(() => {
            //     console.log(row.vip);
                
            //     // const postObj = {
            //     //     autoId: row.autoId,
            //     //     status: row.status === 1 ? 0 : 1
            //     // }
            //     // console.log(postObj);
            //     // api.updateProductInfo(postObj).then((res) => {
            //     //     this.$message.success("操作成功!")
            //     //     // 获取数据列表
            //     //     this.getDataList();
            //     // })
            // }).catch(() => {
            //     this.$message({
            //         type: 'info',
            //         message: '已取消'
            //     });
            // });
        },
        // 上下线操作
        // upDownline(row) {
        //     const statusStr = row.status === 1 ? '下线' : '上线';
        //     this.$confirm(`确定${statusStr}该产品吗?`, '提示', {
        //         confirmButtonText: '确定',
        //         cancelButtonText: '取消',
        //         type: 'warning'
        //     }).then(() => {
        //         const postObj = {
        //             autoId: row.autoId,
        //             status: row.status === 1 ? 0 : 1
        //         }
        //         console.log(postObj);
        //         api.updateProductInfo(postObj).then((res) => {
        //             this.$message.success("操作成功!")
        //             // 获取数据列表
        //             this.getDataList();
        //         })
        //     }).catch(() => {
        //         this.$message({
        //             type: 'info',
        //             message: '已取消'
        //         });
        //     });
        // },
        // 文件移除事件
        handleRemove() {
            this.fileList = [];
            this.dailogFrom.appLogo = "";
        },
        // 超出上传限制提示
        handleExceed() {
            this.$message.warning("当前限制只能上传 1 个文件");
        },
        // 上传成功
        handleSuccess(res) {
            console.log(res);
            
            if (res.code === 1) {
                this.$message.success("上传成功！");
                if (res.data.filePath) {
                    this.dailogFrom.appLogo = res.data.filePath;
                }                
            } else {
                this.$message.error(res.message);
                if (res.code === 40100) {
                    this.$router.push({
                        path: "login"
                    });
                }
            }
        },
        // 文件大小 文件名判断
        beforeAvatarUpload(file) {
            const fileName = file.name;
            const index = fileName.lastIndexOf(".");
            const fileFormat = fileName.substring(index + 1, fileName.length);
            const isName =
                fileFormat === "png" ||
                fileFormat === "jpg" ||
                fileFormat === "jpeg";
            const isLt300KB = file.size / 1024 < 300;
            if (!isName) {
                this.$message.error("上传文件只能是 png/jpg/jpeg 格式!");
                this.fileList = [];
            }
            if (!isLt300KB) {
                this.$message.error("上传文件大小不能超过 150KB!");
                this.fileList = [];
            }
            return isName && isLt300KB;
        },
        //删除产品
        deleteData(index, autoId) {
            this.$confirm("此操作将永久删除, 是否继续?", "提示", {
                confirmButtonText: "确定",
                cancelButtonText: "取消",
                type: "warning"
            })
                .then(() => {
                    api.deleteProductInfo({
                        autoId: autoId
                    }).then(res => {
                        // 改变页面显示
                        this.tableData.splice(index, 1);
                        // 重新请求列表
                        // this.getDataList();
                        // 提示成功
                        this.$message.success("删除成功!");
                    });
                })
                .catch(() => {
                    this.$message({
                        type: "info",
                        message: "已取消删除"
                    });
                });
        },
        // 新增/编辑 弹窗
        addeditDailog(type, rowData) {
            if (type == "add") {
                this.dialogType = "add";
            } else {
                this.dialogType = "edit";
                // this.dailogFrom = Object.assign({}, rowData);
                for (const key in rowData) {
                    if (rowData[key] !== null) {
                        this.dailogFrom[key] = rowData[key].toString();
                    }
                }
            }
            this.dialogFormVisible = true;
        },

        // 关闭弹窗 输入框数据清空
        closeDailog() {
            this.dailogFrom = {
                status: "",
                loanIsNeedIdCard: "",
                amountType: "",
                classification: "",
                vip:"",
                appLogo:""
            };
            this.fileList = [];
        },

        // 新增/编辑 确定
        confirm() {
            // if (!this.dailogFrom.code && this.dialogType == "add") {
            //     this.$message.error("请输入活动code!");
            //     return false;
            // }
            // if (!this.dailogFrom.name) {
            //     this.$message.error("请输入活动名称!");
            //     return false;
            // }
            // if (!this.dailogFrom.startTime) {
            //     this.$message.error("请选择生效时间!");
            //     return false;
            // }
            console.log(this.dailogFrom);
            if (this.dialogType === "add") {
                // 添加数据
                this.addData();
            } else if (this.dialogType === "edit") {
                // 更新数据
                this.updateData();
            }
        },

        // 添加数据
        addData() {
            api.addProductInfo(this.dailogFrom).then(() => {
                this.$message.success("新增成功!");
                // 获取数据列表
                this.getDataList();
                this.dialogFormVisible = false;
            });
        },
        // 更新数据
        updateData() {
            api.updateProductInfo(this.dailogFrom).then(() => {
                this.$message.success("更新成功!");
                // 获取数据列表
                this.getDataList();
                this.dialogFormVisible = false;
            });
        }
    },
    mounted() {
        // 查询数据列表
        this.getDataList();
    }
};
// `AutoId` bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT '自增ID',
//   `AppId` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '产品Id',
//   `AppName` varchar(64) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '产品名称',
//   `AppDesInfo` varchar(200) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '产品描述',
//   `AppLogo` varchar(200) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '产品logo',
//   `Status` int(2) NOT NULL DEFAULT 0 COMMENT '状态：1-上线,0-下线',
//   `LoanIsNeedIdCard` int(2) NOT NULL DEFAULT 0 COMMENT '借款是否需要身份证：0-不,1-需要',
//   `AmountType` int(2) NOT NULL DEFAULT 0 COMMENT '类别：0-小额,1-大额',
//   `LabelInfo` varchar(16) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '贷款超市配置属性：产品优势最多三个字 逗号分隔 机审,宁波系,ID贷系',
//   `Classification` int(2) NOT NULL DEFAULT 0 COMMENT '贷款超市配置属性：分类:1-默认排序,2-最新上架排序,3-最新下款率排序,4-申请专区',
//   `QuotaUpperLimit` decimal(9, 2) NOT NULL DEFAULT 0.00 COMMENT '额度上限',
//   `QuotaLowerLimit` decimal(9, 2) NOT NULL DEFAULT 0.00 COMMENT '额度下限',
//   `ApplyUser` bigint(20) NOT NULL DEFAULT 0 COMMENT '申请人数',
//   `ApplyPassRate` decimal(9, 2) NOT NULL DEFAULT 0.00 COMMENT '审核通过率',
//   `BonusInfo` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '返佣描述 例如:首贷金额2.3%',
//   `AuthenticateInfo` varchar(20) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '认证描述 例如:身份证认证 芝麻分',
//   `Rate` varchar(128) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '0' COMMENT '月费率',
//   `CheckDesInfo` varchar(128) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NOT NULL DEFAULT '' COMMENT '审核说明',
//   `ApplyConditions` text CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL COMMENT '申请条件',
//   `Intruduction` text CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL COMMENT '详情介绍',
//   `BonusRateActivation` decimal(9, 2) NOT NULL DEFAULT 10.00 COMMENT '激活奖励',
//   `BonusRateInvite` decimal(9, 2) NOT NULL DEFAULT 10.00 COMMENT '邀请奖励',
//   `CreateTime` datetime(0) NULL DEFAULT CURRENT_TIMESTAMP(0) COMMENT '创建时间',
//   `LastModifyTime` datetime(0) NULL DEFAULT CURRENT_TIMESTAMP(0) ON UPDATE CURRENT_TIMESTAMP(0) COMMENT '最后修改时间',
//   `SettleInfo` varchar(45) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '结算说明',
//   `AppLinkUrl` varchar(128) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT 'app跳转链接',
//   `CheckInfo` varchar(45) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '审核说明 例如：审核通过后放款',
//   `PosterUrl` varchar(128) CHARACTER SET utf8mb4 COLLATE utf8mb4_general_ci NULL DEFAULT NULL COMMENT '海报url',
</script>

<style>
</style>
